<template>
	<div class="sidebar">
		<el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#f8f8fa"
		 text-color="#6f6f6f" active-text-color="#fff" unique-opened router>
			<template v-for="(item,i) in items">
				<template>
					<el-menu-item :index="item.index" :key="item.index" @click="toPath(item.children)">
						<el-badge :is-dot="item.count>0?true:false"  v-if="collapse" class="item-badge text-xs">
							<div>
								<i :class="item.icon"></i>
								<span slot="title">{{ item.title }}</span>
							</div>
						</el-badge>
						<el-badge :value="item.count>0?item.count:''" v-else class="item-badge text-xs">
							<div>
								<i :class="item.icon"></i>
								<span slot="title">{{ item.title }}</span>
							</div>
						</el-badge>
					</el-menu-item>
				</template>
			</template>
		</el-menu>
	</div>
</template>

<script>
	import bus from '../common/bus';
	import {
		getMenu
	} from '../api/index';
	export default {
		data() {
			return {
				isCollapse: false,
			};
		},
		computed: {
			onRoutes() {	
				// console.log(this.$route)
				let path=this.$route.path
				if(path.indexOf("_") != -1 ){
					path=path.split('_')
					return path[1]
				}else{
					path=this.$route.path.replace("/", "")
					// console.log(path)
					return path
				}
			},
			subs(){
				return this.$store.state.subs
			},
			collapse() {
				return this.$store.state.collapse
			},
			items() {
				let items = localStorage.getItem('menuList');
				items = JSON.parse(items)
				return items
			},
		},
		created() {
			if(this.items!=null){
				this.items.forEach(item=>{
					if(item.index==this.getParam()&&item.children){
						this.$store.commit("topNav", item.children);
					}
				})
			}
		},
		methods: {
			getParam() {
				let url=window.location.href
			    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
			    var r = url.split('#')[1].substr(1)
			    return r;
			},
			toPath(subs){
				if(subs==undefined){
					localStorage.removeItem('subs')
				}else{
					localStorage.setItem('subs', JSON.stringify(subs));
				}
				this.$store.commit("topNav", subs);
			}
		}
	};
</script>

<style scoped lang="less">
	.sidebar {
		display: block;
		position: absolute;
		left: 0;
		top: 63px;
		bottom: 0;
		overflow-y: scroll;

		.el-menu-item {
			height: 50px;
			line-height: 42px;
			padding-left: 0 !important;
			.el-badge {
				width: 150px;
				padding-left: 20px;
			}
			i{
				color: #a1b4cd;
			}
		}
		/deep/.el-badge__content.is-fixed {
			top: 20px !important;
			right: 36px !important;
		}

		/deep/.el-badge__content {
			background: #f12804 !important;
			border: 0 !important;
		}

		.is-active,
		.is-active:hover {
			.el-badge {
				width: 150px;
				height: 40px;
				box-shadow: 3px 3px 5px rgba(47,128,237,.3);
				margin-right: 20px !important;
				background: #2f80ed !important;
				border-radius: 0 4px 4px 0 !important;
			}
		}
	}

	.sidebar::-webkit-scrollbar {
		width: 0;
	}

	.sidebar-el-menu:not(.el-menu--collapse) {
		width: 190px;
	}

	.sidebar>ul {
		height: 100%;
	}

	.el-menu--collapse {
		.el-badge {
			width: 56px !important;
			padding-left: 16px !important;
			border-radius: 0 !important;

			/deep/.el-badge__content.is-dot {
				top: 12px !important;
				right: 34px !important;
			}
		}
	}

	.el-menu-item:hover {
		background: none !important;

		.el-badge {
			color: #2F80ED;
		}

		i {
			color: #2F80ED !important;
		}
	}



	.is-active,
	.is-active:hover {
		.el-badge {
			width: 150px;
			margin-right: 20px !important;
			background: #2F80ED !important;
			border-radius: 0 4px 4px 0;
			color: #fff;
		}

		i {
			color: #fff !important;
		}
	}
</style>
